<template>
<div class="senior">
    <PersonalHeader :content="2"></PersonalHeader>

    <section class="seniormain">
        <section class="type">
            <h2 class="title"> {{$t('senior[0]')}}
                <p>{{$t('senior[1]')}}</p>
            </h2>
            <ul class="contt">
                <li class="list">
                    <h2 class="h1">{{$t('senior[2]')}}</h2>
                    <img class="imglogo" :src="require('_img/shenf/beimian-img.png')" alt="" v-if="!formLabelAlign.front_img">
                    <el-upload :action="uploadimagesurl" :headers="headers" class="img" :show-file-list="false" :on-success="handleAvatarSuccessfront_img" :before-upload="beforeuploadfront_img">
                        <img :src="onchangedata.front_img" v-if="formLabelAlign.front_img" class="avatar">
                    </el-upload>
                    <p class="text">{{$t('senior[3]')}}</p>
                </li>
                <li class="list">
                    <h2 class="h1">{{$t('senior[4]')}}</h2>
                    <img class="imglogo" :src="require('_img/shenf/zhengmian-img.png')" alt="" v-if="!formLabelAlign.back_img">
                    <el-upload :action="uploadimagesurl" :headers="headers" class="img" :show-file-list="false" :on-success="handleAvatarSuccessback_img" :before-upload="beforeuploadback_img">
                        <img :src="onchangedata.back_img" v-if="formLabelAlign.back_img" class="avatar">
                    </el-upload>
                    <p class="text">{{$t('senior[5]')}}</p>
                </li>
                <li class="list">
                    <h2 class="h1">{{$t('senior[6]')}}</h2>
                    <img class="imglogo" :src="require('_img/shenf/shouchi-img.png')" alt="" v-if="!formLabelAlign.handheld_img">
                    <el-upload :action="uploadimagesurl" :headers="headers" class="img" :show-file-list="false" :on-success="handleAvatarSuccesshandheld_img" :before-upload="beforeuploadhandheld_img">
                        <img :src="onchangedata.handheld_img" v-if="formLabelAlign.handheld_img" class="avatar">
                    </el-upload>
                    <p class="text">{{$t('senior[7]')}}</p>
                </li>
            </ul>
            <div class="but">
                <el-button type="primary" @click="handleSubmit" :loading="loading">{{$t('senior[8]')}}</el-button>
            </div>
            <p class="seniorfooter">
                {{$t('senior[9]')}}<br>
                {{$t('senior[10]')}}<br>
                {{$t('senior[11]')}}<br>
                {{$t('senior[12]')}}<br>
            </p>
        </section>
    </section>
</div>
</template>

<script>
import {
    advancedCertification,
    uploadimages
} from '@/api/authentication'
import PersonalHeader from "_dom/personalheader"
import config from '@/config'
import {
    getToken
} from '@/libs/util'
export default {
    name: 'senior',
    data() {
        return {
            formLabelAlign: {
                front_img: "",
                back_img: "",
                handheld_img: "",
            },
            onchangedata: {
                front_img: "",
                back_img: "",
                handheld_img: "",
            },
            loading: false,
            uploadimagesurl: uploadimages(),
            headers: {
                "Authorization": "Bearer " + getToken("token"),
                "from": "pc"
            }
        }
    },
    methods: {
        handleSubmit() { //用户充币明细
            let _data = this.formLabelAlign;
            // if(!_data.front_img){
            //     this.$message.error(this.$t('senior[13]'));
            //     return false;
            // };
            // if(!_data.back_img){
            //     this.$message.error(this.$t('senior[14]'));
            //     return false;
            // };
            // if(!_data.handheld_img){
            //     this.$message.error(this.$t('senior[15]'));
            //     return false;
            // };
            this.loading = true;
            advancedCertification(_data).then(res => {

                this.$message({
                    message: this.$t('senior[16]'),
                    type: 'success'
                });
                setTimeout(() => {
                    this.$router.push({
                        path: "/authentication"
                    });
                }, 800);

            }).catch(err => {

            });
        },
        beforeuploadfront_img(file) {
            let than = this;
            var reader = new FileReader();
            reader.readAsDataURL(file);
            reader.onload = function (e) {
                than.onchangedata.front_img = e.target.result;
            };
        },
        handleAvatarSuccessfront_img(res, file) {
            if (res.status_code == 200) {
                this.formLabelAlign.front_img = res.data.relative_path;
            };
        },
        beforeuploadback_img(file) {
            let than = this;
            var reader = new FileReader();
            reader.readAsDataURL(file);
            reader.onload = function (e) {
                than.onchangedata.back_img = e.target.result;
            };
        },
        handleAvatarSuccessback_img(res, file) {
            if (res.status_code == 200) {
                this.formLabelAlign.back_img = res.data.relative_path;
            }
        },
        beforeuploadhandheld_img(file) {
            let than = this;
            var reader = new FileReader();
            reader.readAsDataURL(file);
            reader.onload = function (e) {
                than.onchangedata.handheld_img = e.target.result;
            };
        },
        handleAvatarSuccesshandheld_img(res, file) {
            if (res.status_code == 200) {
                this.formLabelAlign.handheld_img = res.data.relative_path;
            }
        },
    },
    created() {

    },
    components: {
        PersonalHeader
    },
}
</script>
